<template>
  <div style="height: 100%;"
       v-loading="loading"
       element-loading-text="拼命加载中"
 >
    <div id="mainBox">
    	<p style="font-size: 20px;font-weight: 700;">延期原因</p>
    	<quill-editor v-model="postponeCauseRichText" :options="editorOption"> </quill-editor>
        <div style="margin: 20px auto;width: 200px;">
          <el-button type="success" @click="temporary">暂存</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
    </div>
  </div>
</template>

<script>
  import Quill from 'quill';
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import ImageResize from 'quill-image-resize-module';
  Quill.register('modules/imageResize', ImageResize);
  export default{
    mounted() {
      this.getBackInfo()
    },
    data(){
      return{
        loading:true,
        proId:this.$route.query.proId,
        postponeCauseRichText:'',
        editorOption:{
            modules:{
                imageResize: {},
        		toolbar:[
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],

                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'script': 'sub'}, { 'script': 'super' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],

                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'font': [] }],
                    [{ 'align': [] }],

                    ['clean'],
                    ['image','video','link']
                ],
            },
            theme:'snow'
        }
      }
    },
    methods:{
      //得到数据回显
      getBackInfo(){
        this.$api.project.getDelayCauseByProId({proId:this.proId}).then((res)=>{
          console.log(res)
          this.postponeCauseRichText=res.data.data
          this.loading=false
        })
      },
      //路由跳转
      jumpMyproject(){
        this.$router.push({path:'/myProject'})
      },
      //提交富文本内容
      submitRichTextAxios(){
        this.$api.project.addDelayCauseByProId({
          delayCause:this.postponeCauseRichText,
          proId:this.proId
        }).then((res)=>{
          console.log(res)
        })
      },
      //暂存按钮
      temporary(){
        this.submitRichTextAxios()
        this.$message({
          type: 'success',
          center:true,
          message: '暂存成功!',
          duration:2000,
          offset:screen.height/2 -200
        });
      },
      //提交按钮
      submit(){
        this.$confirm('此操作将提交延期申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          //更新富文本
          this.submitRichTextAxios()
          //更新项目状态（24 ,为申请延期）
          this.$api.project.updateProByProId({
            proApproval:24,
            proId:this.proId,
            proStatus:0
          }).then((res)=>{
            console.log(res)
          })
          //路由跳转
          this.$message({
            type: 'success',
            center:true,
            message: '提交成功!',
            duration:2000,
            offset:screen.height/2 -200
          });
          setTimeout(()=>{
            this.jumpMyproject()
          },1000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交',
            center:true,
            duration:2000,
            offset:screen.height/2 -200
          });
        });

      }
    }
  }
</script>

<style scoped>
  #mainBox{
    height: 500px;
    width: 1100px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-40%,-50%);
  }
</style>
